<template>
    <div class="chat-item" :class="{activeCard: ChatItem.id == itemcurrent }" @click="onclickChatList(ChatItem.id)">
      <div class="info">
        <div class="info-img">
          <ChatUser :imgUrl="ChatItem.imgUrl"/>
        </div>
        <div class="info-detail">
          <div class="name">{{ChatItem.name}}</div>
          <div class="detail">{{ChatItem.detail}}</div>
        </div>
      </div>
    </div>
</template>

<script>
import ChatUser from "@/components/chat/chat-user";
export default {
  name: "chat-list-item",
  components: {ChatUser},
  props: ["ChatItem","itemcurrent"],
  data() {
    return {
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    // 'itemcurrent':{
    //   handler(val){
    //     this.current = this.itemcurrent;
    //   }
    // }
  },
  //方法集合
  methods: {
    onclickChatList(id){
        this.$emit("changeChatListItem",id);
    }
  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
  this.onclickChatList(1);
  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style lang="less" scoped>
.activeCard{
  .info{
    background-color: #1d90f5;
    transition: 0.3s;
    box-shadow: 0px 0px 10px 0px rgba(0,136,255);
    .info-detail{
      .name{
      }
      .detail{
        opacity:1;
      }
    }
  }
}
.chat-item{
  width: 100%;
  height: 90px;
  margin-bottom: 30px;
  border-radius: 10px;
  background-color: rgb(50,54,68);
  cursor: pointer;
  .info{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    overflow: hidden;
    justify-content: space-between;
    align-items: center;
    .info-img{
      margin-left: 10px;
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    .info-detail{
      flex: 0.9;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .name{
        font-size: 20px;
        color: white;
      }
      .detail{
        margin-top: 10px;
        color: white;
        opacity: 0.8;
      }
    }
  }
  &:hover{
    background-color: #1d90f5;
    transition: 0.3s;
    box-shadow: 0 0 10px 0 rgba(0,136,255);
    .info{
      .info-detail{
        .name{
          transition: 0.5s;
        }
        .detail{
          opacity:1;
        }
      }
    }
  }
}


</style>